<template>
	<scDialog title="凭证" v-model="drawer" size="50%" @closed="$emit('close')">
		<div class="flex-row justify-center">
			<div ref="printContent" class="content_print">
				<img
					src="~@/assets/images/print/top_print.png"
					alt=""
					class="top_img"
				/>
				<img
					src="~@/assets/images/print/down_print.png"
					alt=""
					class="bottom_img"
				/>
				<div class="print_list_zone">
					<p class="words_tit">菲菲教育收费凭证</p>
					<div class="invoice_title">
						<p class="date_invoice">
							<span>学员姓名：</span>
							<span class="date_inp_invoice inp_first">陈文静</span>
						</p>
						<p class="name_unit">
							<span>欠费金额：</span>
							<span class="date_inp_invoice inp_first">0.00元</span>
						</p>
						<p class="receive_unit">
							<span>联系方式：</span>
							<span class="date_inp_invoice inp_first"
								>13727177391</span
							>
						</p>
					</div>
					<div class="add_school print_tab">
						<div class="tab_print_out">
							<table class="detail_t tab_no_top">
								<tbody>
									<tr class="hei_short">
										<th width="108" class="bg_no">
											<div class="img_foleder">
												<img
													src="~@/assets/images/print/img_bj.png"
												/>
												<span class="left_fir"
													>报读班级</span
												>
											</div>
										</th>
										<th width="92" class="bg_no">
											<div class="img_foleder">
												<img
													src="~@/assets/images/print/img_bj.png"
												/>
												<span class="left_fir"
													>报班费用</span
												>
											</div>
										</th>
										<th width="90" class="bg_no">
											<div class="img_foleder">
												<img
													src="~@/assets/images/print/img_bj.png"
													alt=""
												/>
												<span class="left_fir"
													>教学用品</span
												>
											</div>
										</th>
										<th width="98" class="bg_no">
											<div class="img_foleder">
												<img
													src="~@/assets/images/print/img_bj.png"
													alt=""
												/>
												<span class="left_fir"
													>教学用品费用</span
												>
											</div>
										</th>
										<th width="98" class="bg_no">
											<div class="img_foleder">
												<img
													src="~@/assets/images/print/img_bj.png"
													alt=""
												/>
												<span class="left_fir"
													>应收金额</span
												>
											</div>
										</th>
										<th width="98" class="bg_no">
											<div class="img_foleder">
												<img
													src="~@/assets/images/print/img_bj.png"
													alt=""
												/>
												<span class="left_fir">首次课</span>
											</div>
										</th>
										<th width="118" class="last bg_no">
											<div class="img_foleder">
												<img
													src="~@/assets/images/print/img_bj.png"
													alt=""
												/>
												<span class="left_fir"
													>上课校区</span
												>
											</div>
										</th>
									</tr>
									<tr>
										<td class="bor_l_no">美甲2全科</td>
										<td class="school_n">3,500.00元</td>
										<td>美甲套妆</td>
										<td>1,000.00元</td>
										<td>4,500.00元</td>
										<td>--</td>
										<td class="last">海珠</td>
									</tr>
								</tbody>
							</table>
						</div>
						<table class="tab_num">
							<tbody>
								<tr>
									<td>
										<div class="txt_beizhu">
											<p class="txt">
												<strong>付款信息：</strong>
												<span
													style="
														font-weight: bold;
														font-size: 12px;
													"
												>
													实缴金额：
												</span>
												4,500.00元
											</p>
										</div>

										<div class="txt_beizhu">
											<strong>备 注：</strong>
											预定五一优惠;
										</div>

										<div class="txt_beizhu">
											<strong>经办校区：</strong>海珠
											<strong style="margin-left: 20px"
												>操作人：</strong
											>田娅
											<strong style="margin-left: 20px"
												>操作时间：</strong
											>2021-05-20 17:14:03
										</div>
										<div class="txt_beizhu">
											<strong>票号：</strong
											>海珠APP202105200010
										</div>
										<div class="txt_beizhu">
											<strong>渠道来源：</strong>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<!--热敏打印区-->
			<div style="display: none;">
				<div ref="rmContent" class="rm_content">
					<div id="remin_container">
						<!--小票头部-->
						<div id="title">
							<p id="heading">菲菲教育收费凭证</p>
							<p id="sub_heading">报名凭证 请保留此小票</p>
						</div>
						<hr />
						<!--学员基本信息-->
						<div id="student_info">
							<p>
								<span class="key">学员姓名：</span>
								<span class="value">陈文静</span>
							</p>
							<p>
								<span class="key">联系方式：</span>
								<span class="value">13727177391</span>
							</p>
						</div>
						<hr />
						<!--课程基本信息-->
						<div id="class_info">
							<p>
								<span class="key">报读班级：</span>
								<span class="value">美甲2全科</span>
							</p>
							<p>
								<span class="key">报班费用：</span>
								<span class="value">3,500.00元</span>
							</p>
							<p>
								<span class="key">教学用品：</span>
								<span class="value">美甲套妆</span>
							</p>
							<p>
								<span class="key">教学用品费用：</span>
								<span class="value">1,000.00元</span>
							</p>
							<p>
								<span class="key">应收金额：</span>
								<span class="value">4,500.00元</span>
							</p>
							<p>
								<span class="key">首次课：</span>
								<span class="value">--</span>
							</p>
							<p>
								<span class="key">上课校区：</span>
								<span class="value">海珠</span>
							</p>
							<p>
								<span class="key">票号：</span>
								<span class="value"></span>
							</p>
							<p>
								<span class="key">渠道来源：</span>
								<span class="value"></span>
							</p>
						</div>
						<hr />
						<!--优惠金额-->

						<p>
							<span class="key">合计：</span>
							<span class="value">4,500.00元</span>
						</p>

						<!--缴费信息-->
						<div id="fee_info">
							<p>
								<span class="key">实缴金额：</span>
								<span class="value">4,500.00元</span>
							</p>
							<p>
								<span class="key">支付方式：</span>
							</p>
						</div>
						<p>
							<span class="key">备注：</span>
							<span class="value">预定五一优惠;</span>
						</p>
						<hr />
						<!--经办校区信息-->
						<div id="campus_info">
							<p>
								<span class="key">经办校区：</span>
								<span class="value">海珠</span>
							</p>
							<p>
								<span class="key">操作人：</span>
								<span class="value">田娅</span>
							</p>
							<p>
								<span class="key">操作时间：</span>
								<span class="value">2021-05-20 17:14:03</span>
							</p>
						</div>
						<hr />
						<div id="seal"></div>
						<!--这里是留白-->
						<div id="blank_space">
							<p></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<template #footer>
			<div class="print_btn">
				<el-button @click="drawer = false">取消</el-button>
				<el-button type="primary" @click="handleRmContent">热敏打印</el-button>
				<el-button type="primary" @click="handlePrint">打印</el-button>
			</div>
		</template>
	</scDialog>
</template>

<script setup>
import { ref } from "vue";
import print from "@/utils/print";

const drawer = ref(true);
const printContent = ref();
const rmContent = ref();
function handlePrint() {
	print(printContent.value);
}
function handleRmContent() {
	print(rmContent.value);
}
</script>

<style lang="scss" scoped>
// #region 激光打印
.content_print * {
	font-family: "Microsoft YaHei", Arial;
	font-size: 14px;
	color: #666;
}
.content_print,
.content_print
	.print_list_zone
	.print_tab
	.tab_print_out
	.tab_no_top
	tr
	td.pad_t_30:hover {
	background-color: #fff;
}
.content_print {
	width: 786px;
	position: relative;
	padding-bottom: 55px;
	border: 1px solid #cfcfcf;
}
.content_print img.top_img {
	position: absolute;
	top: 0;
	left: 0;
}
.content_print img.bottom_img {
	position: absolute;
	right: 0;
	bottom: 0;
}
.content_print .print_list_zone {
	padding-top: 55px;
}
.content_print .print_list_zone .print_tab {
	margin: 15px 20px 0;
	border-right: 1px solid #cfcfcf;
	border-left: 1px solid #cfcfcf;
	position: relative;
}
.content_print
	.print_list_zone
	.print_tab
	.tab_print_out
	.tab_no_top
	tr
	td.last,
.content_print
	.print_list_zone
	.print_tab
	.tab_print_out
	.tab_no_top
	tr
	th.last {
	border-right: none;
}
.content_print .print_list_zone .print_tab .print_img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -183px;
	margin-top: -81px;
	z-index: 0;
}
.content_print .print_list_zone .print_tab .tab_print_out {
	width: 100%;
	z-index: 1000;
}
.content_print .print_list_zone .print_tab .tab_print_out .detail_t td {
	padding: 0;
}
.content_print .print_list_zone .print_tab .tab_print_out .tab_no_top {
	border-collapse: collapse;
	border-spacing: 0;
	margin-top: 0;
	border-top: 1px solid #cfcfcf;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid #cfcfcf;
}
.content_print
	.print_list_zone
	.print_tab
	.tab_print_out
	.tab_no_top
	tr
	td.bor_l_no {
	border-left: none;
}
.content_print
	.print_list_zone
	.print_tab
	.tab_print_out
	.tab_no_top
	tr
	td.pad_t_30 {
	padding-top: 81px;
	overflow: hidden;
	border: none;
}
.content_print
	.print_list_zone
	.print_tab
	.tab_print_out
	.tab_no_top
	tr
	td.pad_t_30
	.total_charge {
	color: #ff4a3f;
	float: left;
	margin-left: 20px;
}
.content_print
	.print_list_zone
	.print_tab
	.tab_print_out
	.tab_no_top
	tr
	td.pad_t_30
	.sign_sure {
	float: right;
	margin-right: 85px;
	color: #ccc;
}
.content_print
	.print_list_zone
	.print_tab
	.tab_print_out
	.tab_no_top
	tr
	td.pad_t_30
	.sign_sure
	.sign_inp {
	width: 100px;
}
.content_print .print_list_zone .print_tab .tab_num {
	width: 100%;
	min-height: 160px;
	border-bottom: 1px solid #cfcfcf;
}
.content_print .print_list_zone .print_tab .tab_num tr {
	border-top: none;
	position: relative;
}
.content_print .print_list_zone .print_tab .tab_num tr td {
	overflow: hidden;
}
.content_print .print_list_zone .print_tab .tab_num tr td .total_charge {
	color: #ff4a3f;
	float: left;
	margin-left: 20px;
}
.content_print .print_list_zone .print_tab .tab_num tr td .sign_sure {
	float: right;
	margin-right: 85px;
	color: #ccc;
}
.content_print .print_list_zone .print_tab .tab_num tr td .sign_sure .sign_inp {
	width: 100px;
}
.content_print .print_list_zone .print_tab .tab_num tr td .money_detail {
	overflow: hidden;
	padding: 0 0 15px;
}
.content_print .print_list_zone .print_tab .tab_num tr td .txt_beizhu {
	overflow: hidden;
	padding: 0 20px 10px;
}
.content_print .print_list_zone .print_tab .tab_num tr td .txt_beizhu p {
	word-break: break-all;
}
.content_print .print_list_zone .print_tab .tab_num tr td .sealImg {
	width: 140px;
	height: 140px;
	position: absolute;
	right: 10px;
	bottom: 10px;
	border-radius: 50%;
}
.content_print .print_list_zone .words_tit {
	font-size: 24px;
	text-align: center;
	border-top: 1px dashed #e7e7e7;
	color: #192942;
	padding-top: 12px;
	margin: 0 20px 20px;
}
.content_print .print_list_zone .invoice_title {
	overflow: hidden;
	border-bottom: 1px solid #ff4a3f;
	padding-bottom: 5px;
	text-align: center;
	margin: 0 20px;
}
.content_print .print_list_zone .invoice_title p {
	font-size: 12px;
}
.content_print .print_list_zone .invoice_title p.date_invoice {
	color: #192942;
	float: left;
	text-align: left;
}
.content_print .print_list_zone .invoice_title p.receive_unit {
	margin-left: 150px;
	margin-right: 121px;
	color: #192942;
}
.content_print .print_list_zone .invoice_title p.name_unit {
	color: #192942;
	float: right;
}
.content_print .print_list_zone .invoice_title p.name_unit .payee {
	min-width: 30px;
	text-align: right;
	display: inline-block;
}
.content_print .print_list_zone .invoice_title .date_inp_invoice {
	color: #000;
}
.content_print .print_list_zone .invoice_title .date_inp_invoice.inp_first {
	width: 214px;
	text-align: left;
}
.content_print .print_list_zone .invoice_title .date_inp_invoice.inp_sec {
	width: 268px;
	margin-right: 15px;
}
.content_print .print_list_zone .invoice_title .date_inp_invoice.inp_third {
	width: 70px;
	text-align: right;
	display: inline-block;
}
.form_ok,
.form_top_ctrl.hide,
.form_top_ctrl.search_btn_zone {
	display: none;
}
.content_print
	.print_list_zone
	.invoice_title
	.date_inp_invoice::-webkit-input-placeholder {
	color: #666;
}
.content_print
	.print_list_zone
	.invoice_title
	.date_inp_invoice:-moz-placeholder {
	color: #666;
}
.content_print
	.print_list_zone
	.invoice_title
	.date_inp_invoice::-moz-placeholder {
	color: #666;
}
.content_print
	.print_list_zone
	.invoice_title
	.date_inp_invoice:-ms-input-placeholder {
	color: #666;
}
.content_print.refund_certificate {
	padding-bottom: 40px;
}
.content_print.refund_certificate .print_list_zone {
	padding-top: 13px;
}
.content_print.refund_certificate .print_list_zone .words_tit {
	border-top: none;
}
.content_print.refund_certificate .print_list_zone .print_tab .tab_print_out {
	margin-bottom: 0;
}
.content_print.refund_certificate
	.print_list_zone
	.print_tab
	.tab_no_top
	.defringe {
	border-right: 0;
}
.content_print.refund_certificate
	.print_list_zone
	.print_tab
	.tab_no_top
	.hei_short
	.bg_no {
	height: 42px;
}
.content_print.refund_certificate .print_list_zone .print_tab .detailed {
	width: 100%;
}
.content_print.refund_certificate .print_list_zone .print_tab .detailed tr {
	height: 41px;
	line-height: 41px;
	border-bottom: 1px solid #cfcfcf;
}
.content_print.refund_certificate .print_list_zone .print_tab .detailed tr td {
	font-size: 12px;
	padding-left: 15px;
	height: 41px;
	line-height: 41px;
}
.content_print.refund_certificate
	.print_list_zone
	.print_tab
	.detailed
	tr
	td
	span {
	font-size: 12px;
}
.content_print.refund_certificate .print_list_zone .print_tab .tab_num {
	position: inherit;
}
.content_print.refund_certificate .print_list_zone .print_tab .tab_num tr {
	height: 183px;
	position: relative;
}
.content_print.refund_certificate .print_list_zone .print_tab .tab_num tr td {
	padding-top: 50px;
}
.content_print.refund_certificate
	.print_list_zone
	.print_tab
	.tab_num
	tr
	.sealImg {
	width: 140px;
	height: 140px;
	position: absolute;
	right: 10px;
	bottom: 10px;
	border-radius: 50%;
}
.content_print.refund_certificate.account_recharge
	.print_list_zone
	.add_school
	.tab_print_out
	.detail_t
	.hei_short {
	height: 52px;
	z-index: 3;
}
.content_print.refund_certificate.account_recharge
	.print_list_zone
	.add_school
	.tab_print_out
	.detail_t
	.hei_short
	.bg_no {
	height: 52px;
	line-height: 52px;
	border-left: 1px solid #cfcfcf;
	border-right: 0;
}
.content_print.refund_certificate.account_recharge
	.print_list_zone
	.add_school
	.tab_print_out
	.detail_t
	.hei_short
	.bg_no
	div {
	float: left;
	width: 50%;
}
.content_print.refund_certificate.account_recharge
	.print_list_zone
	.add_school
	.tab_print_out
	.detail_t
	.hei_short
	.bg_no
	.img_foleder
	img {
	height: 52px;
	top: 0;
	z-index: 1;
}
.content_print.refund_certificate.account_recharge
	.print_list_zone
	.add_school
	.tab_print_out
	.detail_t
	.hei_short
	.bg_no
	.beautiful {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-left: 1px solid #cfcfcf;
}
.content_print.refund_certificate.account_recharge
	.print_list_zone
	.add_school
	.tab_print_out
	.detail_t
	.hei_short
	.bg_no.bg_no1 {
	border-left: 0;
}
.detail_t {
	width: 100%;
	margin-top: 10px;
	border: 1px solid #cfcfcf;
}
.detail_t.width_limit {
	width: 588px;
}
.detail_t.tr_hei_30 tr.hei_short {
	height: 30px;
	line-height: 30px;
}
.detail_t.tr_hei_30 td {
	height: 20px;
}
.detail_t.no_border {
	border: none;
}
.detail_t.width_scale {
	width: 89%;
}
.detail_t.top_0 {
	margin-top: 0;
}
.detail_t th.bg_no,
.detail_t tr.no_bgc:hover {
	background-color: #fff;
}
.detail_t th.bg_no {
	padding: 0;
}
.detail_t th.bg_no {
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-right: 1px solid #cfcfcf;
}
.detail_t th.bg_no .img_foleder {
	position: relative;
}
.detail_t th.bg_no img {
	width: 100%;
	height: 42px;
	position: absolute;
	left: 0;
	top: -1px;
	z-index: 0;
}
.detail_t th.bg_no span {
	position: relative;
	z-index: 1;
}
.detail_t tr {
	border-bottom: 1px solid #cfcfcf;
}
.detail_t tr:hover {
	background-color: #eee;
}
.detail_t th {
	color: #192942;
	font-size: 14px;
}
.detail_t tr.hei_short {
	height: 40px;
	line-height: 40px;
	border-left: none;
}
.detail_t tr.hei_short th.min_width {
	min-width: 150px;
}
.detail_t tr.hei_short th.min_width_spe {
	min-width: 130px;
}
.detail_t tr.hei_short th.posi_rel .bgc_img {
	position: relative;
}
.detail_t tr.hei_short th.posi_rel .bgc_img .bgc_line {
	width: 100%;
	height: 100%;
}
.detail_t tr.hei_short th.posi_rel .bgc_img span.time_title {
	position: absolute;
	top: 8px;
	left: 19px;
}
.detail_t tr.hei_short th.posi_rel .bgc_img span.teacher_title {
	position: absolute;
	top: -7px;
	right: 22px;
}
.detail_t th {
	background-color: #e7e7e7;
	text-align: center;
	border-right: 1px solid #cecece;
}
.detail_t th.last {
	border-right: none;
}
.detail_t td {
	height: 40px;
	border: 1px solid #cfcfcf;
	border-top: none;
	text-align: center;
	font-size: 12px;
	color: #333;
}
// #endregion 激光打印

// #region 热敏打印
.rm_content {
	.key {
		width: 100px;
	}
	#heading {
		text-align: center;
		font-size: 18px;
		font-weight: 500;
	}
	#sub_heading {
		text-align: right;
	}
	hr {
		border-style: dashed;
	}
}
// #endregion 热敏打印
</style>
